<template>
  <div>
    <vue-ueditor-wrap :config="myConfig" v-model="content" @ready="ready" style="height:500px;">
    </vue-ueditor-wrap>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
import { getToken } from '@/utils/auth'

export default {
  name: "elUeditor",
  components: {VueUeditorWrap},
  props: ['value'],
  data() {
    return {
      content: '',
      editor: null,
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 工具栏是否可以浮动
        autoFloatEnabled: false,
        // 关闭自动保存
        enableAutoSave: true,
        // 初始容器高度
        initialFrameHeight: 900,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
        UEDITOR_HOME_URL: '/UEditor/',
        // 上传文件接口
        serverUrl: process.env.VUE_APP_BASE_API + "/system/ossFile/upload2", // 上传的图片服务器地址
        headers: {
          'Authorization': 'Bearer ' + getToken()
        },
        allowDivTransToP: false,
        disabledTableInTable: false,
        toolbars: [
          [
            'source', //源代码
            'undo', //撤销
            'redo', //重做
            'formatmatch', //格式刷
            'bold', //加粗
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'superscript', //上标
            'subscript', //下标
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            'rowspacingtop', //段前距
            'rowspacingbottom', //段后距
            'lineheight', //行间距
            'anchor', //锚点
            'indent', //首行缩进
            // 'snapscreen', //截图
            'fontborder', //字符边框
            'blockquote', //引用
            'pasteplain', //纯文本粘贴模式
            'selectall', //全选
            'horizontal', //分隔线
            'removeformat', //清除格式
            'time', //时间
            'date', //日期
            'insertcode', //代码语言
            'inserttable', //插入表格
            'insertrow', //前插入行
            'insertcol', //前插入列
            'mergeright', //右合并单元格
            'mergedown', //下合并单元格
            'deleterow', //删除行
            'deletecol', //删除列
            'splittorows', //拆分成行
            'splittocols', //拆分成列
            'splittocells', //完全拆分单元格
            'edittable', //表格属性
            'edittd', //单元格属性
            'insertparagraphbeforetable', //"表格前插入行"
            'deletecaption', //删除表格标题
            'inserttitle', //插入标题
            'mergecells', //合并多个单元格
            'deletetable', //删除表格
            'customstyle', //自定义标题
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            'simpleupload', //单图上传
            // 'insertvideo', //视频
            // 'insertimage', //多图上传
            'unlink', //取消链接
            'link', //超链接
            // 'emotion', //表情
            'spechars', //特殊字符
            'searchreplace', //查询替换
            // 'map', //Baidu地图
            // 'gmap', //Google地图
            'forecolor', //字体颜色
            'backcolor', //背景色
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'fullscreen', //全屏
            'directionalityltr', //从左向右输入
            'directionalityrtl', //从右向左输入
            'pagebreak', //分页
            'insertframe', //插入Iframe
            'imagenone', //默认
            'imageleft', //左浮动
            'imageright', //右浮动
            // 'attachment', //附件
            'imagecenter', //居中
            'wordimage', //图片转存
            'edittip ', //编辑提示
            'autotypeset', //自动排版
            // 'webapp', //百度应用
            'touppercase', //字母大写
            'tolowercase', //字母小写
            'background', //背景
            'template', //模板
            'scrawl', //涂鸦
            // 'music', //音乐
            'drafts', // 从草稿箱加载
            // 'charts', // 图表
            'cleardoc', //清空文档
            'preview', //预览
            'print', //打印
            'help', //帮助
          ]
        ],
        imageActionName: 'uploadimage', // 禁用图片上传
        imageFieldName: 'file',
        imageUrlPrefix: '',
        videoActionName: 'file', // 禁用视频上传
      }
    }
  },
  watch: {
    value(val) {
      debugger;
      this.content = val;
    },
    content(val) {
      debugger;
      let text = this.editor ? this.editor.getContentTxt() : "";
      this.$emit('change', val, text);
    },
  },
  mounted() {
    debugger;
    this.content = this.value;
  },
  methods: {
    ready(editorInstance) {
      debugger;
      this.editor = editorInstance;
    },
    insertDefineHtml(html) {
      debugger;
      this.editor.execCommand('inserthtml', html);
    },
  }
}
</script>
